<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
				list-style: none;
			}
			
			.test {
				height: 1500px;
			}
			
			.p {
				position: absolute;
				right: 100px;
				bottom: -500px;
				font-size: 24px;
				transition: 1s;
				cursor: pointer;
			}
			
			.img {
				width: 210px;
				height: 126px;
				border-top: 1px solid #000000;
				overflow: hidden;
			}
			li{
				display: inline-block;
				margin-left: 20px;
				cursor: pointer;
			}
			
		</style>
	</head>

	<body>
		<div class="img"><img  src="img/dongtai-4.png" /></div>
		<ul>
			<li class="li">收起</li>
			<li class="lil">下拉</li>
			<li class="lz">伸缩</li>
		</ul>
		<div class="test">
			<p class="p">返回顶部</p>
		</div>
		
		
		<script type="text/javascript">
			//滚动条
			var btn = document.getElementsByClassName("p")[0];
			btn.addEventListener("click", function() {
				var str =window.outerHeight;
				var co = setInterval(function() {
					str-=100;
					window.scrollTo(0, str);
					if(str<=0) {
						clearInterval(co);
					} ;
				},28);
			})
			//图片
			var btn1 = document.getElementsByClassName("img")[0];
			var li = document.getElementsByClassName("li")[0];
			li.addEventListener("click", function() {
				btn1.style.height="0px";
				btn1.style.transition="1s";
				str1=false;
			});
			var lil=document.getElementsByClassName("lil")[0];
			lil.addEventListener("click",function(){
				btn1.style.height="126px";
				str1=true;
			});
			var lz=document.getElementsByClassName("lz")[0];
			var str1 = true; 
			 lz.addEventListener("click",function(){
				if(str1){
					btn1.style.height="0px";
					btn1.style.transition="1s";
				}else{
					btn1.style.height="126px";
				}
				str1 =! str1;
			})
		
		</script>
	</body>

</html>